// 选择收货地址
import React, { Component } from 'react'
import Header from '@/components/HeadOut'
import { regionSelection, searchAreaUrl } from '@/api'
import style from './region.module.scss';
import { connect } from 'react-redux'
import { NavLink } from 'react-router-dom'
import { changeLocationSelectedAction } from '@/store/modules/Shipping/shippingActiveCreate.js'
import { regionChangeCurrentLocationAction } from '@/store/modules/Region/regionActiveCreate.js'
import SearchAddress from '@/components/SearchAddress'

class Shipping extends Component {
    constructor(props) {
        super(props)
        this.state = {
            regionSelectionList: [],
            searchAreaInputTxt: '',
            addressObj: {
                txt: '新增地址',
                path: '/region'
            },
            searchAddressList: []
        }
    }
    render() {
        return (
            <div className={style.regionListBox}>
                <Header title='选择收货地址' address={this.state.addressObj} />
                <div className={style.search}>
                    <div className={style.addressBox}>
                        <NavLink to='/region' className={style.nowrapCss}>{this.props?.currentLocation?.name || this.props.LocationSelected.address || '请选择'}</NavLink>
                        <i className={style.sanjiao}></i>
                    </div>
                    <div className={style.searchChoiceInputBox}>
                        <i className={'iconfont icon-fangdajing ' + style.searchInputFangDa}></i>
                        <input type="text" onChange={this.searchArea} value={this.state.searchAreaInputTxt} className={style.searchChoiceInput} placeholder='请输入地址' />
                    </div>
                </div>
                <div className={style.alphabetBox}>
                    {this.issearch()}
                </div>
            </div>
        )
    }
    componentDidMount() {
        if (this.props.isLogin) this.getregionSelectionFn();
    }
    //获取用户输入过的地址数据
    getregionSelectionFn = () => {
        regionSelection().then((res) => {
            console.log(res);
            this.setState({
                regionSelectionList: res
            })
        })
    }
    //渲染已输入的地区数据
    cityListSort = () => {
        return this.state.regionSelectionList?.map((item, index) => {
            return (
                <li key={index} className={style.regionSelectionItem} onClick={() => { this.props.changeLocationSelected(item); this.props.changeCurrentLocation(item) }}>
                    <p >
                        <span className={style.name}>{item.name}</span>
                        <span className={style.userSex}>{item.sex === 1 ? '先生' : '女士'}</span>
                        <span className={style.phone}>{item.phone}</span>
                    </p>
                    <p className={style.address}>{item.address}</p>
                </li>
            )
        })
    }
    //是否选择地区
    isPlace = () => {
        if (this.props.currentLocation.name || this.props.LocationSelected.address) {
            return (
                <>
                    <div className={style.selectedArea}>当前地址</div>
                    <p className={style.cityListItem}>{this.props.LocationSelected.address || this.props.currentLocation.name}</p>
                </>
            )
        } else {
            return (
                <>
                    <div className={style.selectedArea}>当前地址</div>
                    <div className={style.cityListItemTe}>未能获取地址
                        <p className={style.CollimationBox}>
                            <i className='iconfont icon-zhunxing'></i>
                            重新定位
                        </p>
                    </div>
                </>
            )
        }
    }
    //搜索地区
    searchArea = (e) => {
        if (!this.props.currentLocation.latitude) return;
        this.setState({ searchAreaInputTxt: e.target.value })
        let { latitude, longitude } = this.props.currentLocation;
        let param = {
            keyword: e.target.value,
            latitude,
            longitude,
            offset: 0,
            limit: 20,
        }
        searchAreaUrl(param).then((res) => {
            this.setState({
                searchAddressList: res
            })
        })
    }
    //搜索的時候渲染頁面
    issearch = () => {
        if (this.state.searchAddressList.length > 0 && this.state.searchAreaInputTxt.trim() !== '') {
            return (
                <SearchAddress delsearchAddressList={this.delsearchAddressList} searchAddressList={this.state.searchAddressList}></SearchAddress>
            )
        } else {
            //未登录则不渲染
            if (!this.props.isLogin) return;
            return (
                <>
                    {this.isPlace()}
                    <div className={style.selectedArea}>收货地址</div>
                    <ul>{this.cityListSort()}
                        <li></li>
                    </ul>
                </>
            )
        }
    }
    delsearchAddressList = () => {
        this.setState({
            searchAddressList: [],
            searchAreaInputTxt: ''
        })
    }
}

const stateToProps = (state) => {
    return {
        currentLocation: state?.region?.currentLocation || {},
        LocationSelected: state?.shipping?.LocationSelected || {},
        isLogin: state?.user?.isLogin,
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changeLocationSelected: (value) => {//修改所在位置
            let action = { value }
            dispatch(changeLocationSelectedAction(action))
        },
        changeCurrentLocation: (value) => {//修改所在地区位置
            let action = { value }
            dispatch(regionChangeCurrentLocationAction(action))
        }
    }
}


export default connect(stateToProps, dispatchToProps)(Shipping)